<template>
  <div class="flow-item">

    <!--头像标题容器-->
    <div class="title-pot">
      <!--头像容器-->
      <div class="head-sculpture-box">
        <img src="@/assets/images/headSculpture/people.png">
      </div>
      <!--标题容器-->
      <div class="title-box">
        <span class="title">{{infoData.operationUserName}}</span>
        <span class="date">{{infoData.operationTime}}</span>
      </div>
    </div>
    <!--内容容器-->
    <div class="content-pot">
      <!--条目容器-->
      <div class="item-box">
        <span class="label">操作类型：</span>
        <span class="value">{{infoData.operationTypeName}}</span>
      </div>
      <div class="item-box">
        <span class="label">目标：</span>
        <span class="value">{{infoData.operationTargetName}}</span>
      </div>
      <div class="item-box">
        <span class="label">备注：</span>
        <span class="value">{{infoData.operationRemark}}</span>
      </div>

    </div>

  </div>
</template>

<script>
export default {
  props: {
    infoData: {
      type: Object
    }
  }
}
</script>

<style lang="scss" scoped>
.flow-item{
  width:100%;
  height: 220px;
  margin-bottom:15px; //设置卡片间距
  //background: #BBFFAA;
  //设置阴影以达到每个卡片都有边框的样子
  box-shadow: 0px 1px 10px rgba(0,0,0,0.2);
  // 设置头像标题容器样式
  .title-pot{
    width: 93%; //左右两边的缩进
    height: 45%;
    margin:0 auto;
    border-bottom: 1px solid rgba(228, 231, 237, 1);
    //background: yellow;
    // 设置头像和标题容器的位置
    display: flex;
    align-items: center;
    // 设置头像容器样式
    .head-sculpture-box{
      width: 50px;
      height: 50px;
      background: rgba(234, 248, 245, 1);
      border-radius:50%;
      flex-shrink: 0;  //禁止被压缩
      //设置人像位置
      display: flex;
      justify-content: center;
      align-items: center;
      //设置与右侧标题间距
      margin-right: 10px;


    }
    // 设置标题容器样式
    .title-box{
      //设置内部元素位置
      display: flex;
      flex-direction: column;
      justify-content: center;
      //设置标题样式
      .title{
        font-size: 18px;
      }
      //设置日期样式
      .date{
        font-size: 12px;
        color: rgba(144, 147, 153, 1);
      }
    }
  }
  // 设置内容容器样式
  .content-pot{
    width: 93%;  //左右两边的缩进
    height: 55%;
    margin:0 auto;
    //background: pink;
    //设置内部元素位置
    .item-box{
      margin-top: 12px;  //设置条目间距
      //使span成为块元素
      display: flex;
      align-items: center;
      .label{
        width: 100px; //使后边的文本能够对齐
        font-size: 14px;
        color: rgba(144, 147, 153, 1);
      }
      .value{
        font-size: 14px;
      }
    }


  }
}
</style>
